<template>
	<view>
		 <view class="beijing">
			 <view @click="fanhui" class="fangshi">
			 
			 	<text class=" tn-icon-left" ></text>
			 	<view style="">返回</view>
				<view> </view>
			 	 
			 	
			 </view>
			 <view class="box">
				  <tn-form :model="form" ref="form">
			      <tn-form-item label="银行卡号"  labelWidth="160" prop="num">
			        <tn-input  v-model="form.num" placeholder='请输入银行卡号'/>
			      </tn-form-item>
				  <tn-form-item label="收款人姓名"  labelWidth="160" prop="name">
				    <tn-input v-model="form.name" placeholder='请输入收款人姓名'/>
				  </tn-form-item>
				  <tn-form-item label="开户行"  labelWidth="160" prop="home">
				    <tn-input v-model="form.home" placeholder='请输入开户行'/>
				  </tn-form-item>
				  <tn-form-item label="联系方式"  labelWidth="160" prop="phone">
				    <tn-input v-model="form.phone" placeholder='请输入联系方式'/>
				  </tn-form-item>
				  </tn-form>
				
			 </view>
		
			 <view class="button" >
				 <tn-button @click="enter" class="tn-main-gradient-cyan--reverse" backgroundColor="#3ab54a" fontSize="24" fontColor="tn-color-white" shadow  width="89vw" shape="round">确认</tn-button>
				 
			 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  value: '',
				  form:{
					  num:'',
					  name:'',
					  home:'',
					  phone:''
				  },
				      rules: {
				            name: [{
				              required: true,
				              message: '请输入收款人姓名',
				              // 可以单个或者同时写两个触发验证方式 
				              trigger: ['change'],
				            }],
				            num: [{
							required: true,
				              min: 5,
				              message: '请输入银行卡号',
				              trigger: ['change']
				            }],
							home: [{
							  required: true,
							  message: '请输入开户行',
							  // 可以单个或者同时写两个触发验证方式 
							  trigger: ['change'],
							}],
							phone: [{
							  required: true,
							  min: 11,
							  message: '请输入联系方式',
							  // 可以单个或者同时写两个触发验证方式 
							  trigger: ['change'],
							}],
				          }
				        
			}
		},
		onReady(){
			 this.$refs.form.setRules(this.rules);
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			},
			enter(){
				// console.log('确认')
				   this.$refs.form.validate(valid => {
				          if (valid) {
				            console.log('验证通过');
							uni.setStorageSync("chooes",this.form)
							uni.navigateTo({
								url:"/pages/tixian/tixian"
							})
							
							
				          } else {
				            console.log('验证失败');
				          }
				        });
			},
		}
	}
</script>

<style scoped>
		
	*{
		padding: 0;
		margin: 0;
	}
		
	.fangshi{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		
	.tn-form-item{
		padding: 20rpx 30rpx;
		font-weight: 600;
		color: #303133;
	}
		
	.tn-form-item .tn-input{
		font-weight: 500;
	}
	.beijing{
		height: 100vh;
		background: #f3f3f3;
		/* padding: 30rpx; */
	}
		
	.box{
		background-color: #fff;
		    /* padding: 15px 15px 10px; */
	}
		
	

	
		
	.button{
		text-align: center;
		margin-top: 130rpx;
		
	}
	
</style>
